import React, {PureComponent, Component} from 'react'
import dismissKeyboard from 'dismissKeyboard'
import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../src/config'
import {View, 
    Text, StyleSheet, Vibration, Image, TextInput, TouchableOpacity, SafeAreaView, NativeModules} from 'react-native'
import {bindActionCreators, combineReducers} from 'redux'
import { connect } from 'react-redux'
import * as actions from '../actions'
import store from '../store'
import {navToTab} from '../navigation'
import CookieManager from 'react-native-cookies'

import * as components from '../components'
class login extends PureComponent {
    constructor(props){
        super(props);
        
    }
    componentWillMount(){
        this.setState({
            password: 'jk',
            account: 'jk',
            progressShow: false
        })
    }
    componentDidMount(){

    }

    componentWillUnmount(){
        console.log('登录')
        console.log('login Unmount')
    }
    render(){
        let {navigation} = this.props
        return (
        <SafeAreaView style={styles.container}>
            <View style={styles.top}>
               <View style={{flex: 4}}>
                    <Text style= {styles.title}> Hello!</Text>
                    <Text style= {styles.titleSec}> 欢迎回到LiVE汽车零售管理平台 </Text>
               </View>
               <View style= {[{flex: 5},styles.imageContainer]}>
                    <Image source={require('../../resource/login/logo.png')}
                        style={styles.titleImage}
                    />
               </View>
               <View style= {styles.inputContainer}>
                    <View style={{height: 40}}>
                        <View style={{flexDirection: 'row',justifyContent: 'space-between'}}>
                            <Text style={styles.inputText}>用户名</Text>
                            <TextInput style={styles.inputItem} editable={true} ref="account"
                            onChangeText={(account)=>{
                                this.setState({account})
                            }} 
                            underlineColorAndroid="transparent"/>
                        </View>
                        <View style= {styles.seperatorLine}></View>
                    </View>
                    <View style={{height: 40}}>
                        <View style={{flexDirection: 'row',justifyContent: 'space-between', flex:1}}>
                            <Text style={styles.inputText}>密  码</Text>
                            <View style={{flex: 1}}></View>
                            <TextInput style={styles.inputItem} editable={true} 
                             secureTextEntry= {true} ref="password" onChangeText = {(password) => {
                                this.setState({password})
                             }}
                             underlineColorAndroid="transparent"
                             />
                        </View>
                        <View style= {styles.seperatorLine}></View>
                    </View>
                </View>
                <TouchableOpacity style={styles.loginBtn} onPress = {this._loginPress}>
                    <Text style= {styles.loginText} >登录</Text>
                </TouchableOpacity>
            </View>
            <View style= {styles.bottom}>
            </View>
            <components.IRISProgress isShow = {this.state.progressShow}/>
        </SafeAreaView>
        )
    }

    _loginPress = () => {
        let {navigation} = this.props
        this.setState({
            progressShow : true
        })
        store.dispatch(actions.login.userLogin(this.state.account, this.state.password,(res)=>{
            NativeModules.TokenModule.saveToken(res.obj["empToken"])
            console.log(JSON.stringify(res))
            // NativeModules.TokenModule.saveToken()
            navToTab(navigation)
            this.setState({
                progressShow : false
            })
        },()=>{
            console.log('failure');
            this.setState({
                progressShow : false
            })
        }))
    
    }
}

function mapStateToProps(state){
    let {account, password} = state
    return {
        account,
        password
    }
}

function mapDispatchToProps(dispatch) {
    
    return bindActionCreators(actions, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(login)

const styles = StyleSheet.create({
    container: {
        flex: 1, 
        backgroundColor: 'rgb(255,255,255)',
        position: 'absolute',
        margin:0,
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT - 20
    },
    top: {
        flex: 9,
        flexDirection: 'column',
        backgroundColor: 'white',
        marginLeft: 20,
        marginRight: 20
    },
    bottom: {
        flex: 4
    },
    title: {
        marginTop: 40,
        fontSize: 24,
        color:'rgb(10,161,239)'
    },
    titleSec: {
        fontSize: 15,
        fontWeight: 'bold'
    },
    titleImage: {
        height: 110,
        width: 110,
        
    },
    imageContainer: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    inputContainer: {
        flex: 4,
        // marginLeft: 20,
        // marginRight: 20,
    },
    inputItem: {
        height: 40,
        width: SCREEN_WIDTH - 40 - 60,
        padding: 0      
    },
    seperatorLine: {
        backgroundColor: 'rgb(189, 199,209)',
        height: 1
    },
    inputText: {
        fontSize: 14,
        fontWeight: 'bold',
        alignSelf: 'center'
    },
    loginBtn: {
        borderRadius: 5,
        height: 40,
        backgroundColor: 'rgb(0, 140, 238)',
        alignItems: 'center',
        justifyContent: 'center'
    },
    loginText: {
        fontSize : 20,
        color: 'white'
    }
})